<template>
  <!-- 最外层使用 el-container容器 -->
  <el-container class="main_container">
    <!-- 1.头部区域 -->
    <el-header>
      <!--      在头部左侧是  公司logo 图片-->
      <img src="../assets/image/logo.png">
      <!--      在头部右侧是  个人信息(用户头像,用户名) -->
     <el-dropdown style="padding-right: 5px">
       <div>
         <!-- 用户图像 使用标签:el-avatar -->
          <el-avatar :src="userAvatar" style="cursor: pointer;width: 40px; height: 40px;"></el-avatar>
         <!-- 用户名称 -->
         <span class="user_name">
           {{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
       </div>
        <!-- 下拉菜单 -->
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item icon="el-icon-user">用户信息</el-dropdown-item>
         <el-dropdown-item icon="el-icon-edit-outline">修改用户</el-dropdown-item>
         <el-dropdown-item icon="el-icon-circle-plus-outline" ><span @click="logout">退出登陆</span></el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
    </el-header>
    <el-container>
      <!-- 2.左侧栏    -->
      <!--      <el-aside :width="isOpen === true ?'65px':'200px' ">-->
      <el-aside :width="isOpen === true ? '65px':'200px' ">
        <div class="toggleBtn" @click="changeToggle">
          <i :class="change_toggle"></i>
        </div>
        <!--
          el-menu 树形菜单:有父子关系的菜单,就是一级菜单二级菜单
          collapse:是否开启左侧栏缩进
          router :是否开启vue-router 路由:就是页面跳转根据url 去跳转
          background-color	菜单的背景色
          text-color	菜单的文字颜色
          default-active	当前激活菜单的 index 当我们去选中某一个菜单需要激活选中
          unique-opened	是否只保持一个子菜单的展开
          router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
          collapse-transition	是否开启折叠动画
        -->
        <el-menu
        :collapse="isOpen"
        :router="true"
        :default-active="activePath"
        background-color="#222653"
        :collapse-transition="false"
        text-color="rgba(255,255,255,0.7)"
        unique-opened>
        <!--3.使用MenuTree子菜单组件
        往子组件里面传值 :menuList=""
        -->
        <MenuTree :menuList="this.menuList"></MenuTree>
        </el-menu>
      </el-aside>
      <!-- 3.中间内容区域-->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

  </el-container>
</template>

<script>
// 1.导入树形菜单组件
import MenuTree from "../components/MenuTree";
import menuJson from '../assets/json/menuJson.json'
export default {
  name: 'DashBook',
  // 2.注册MenuTree组件到 Vue 实例对象里面去
  components:{MenuTree},
  data(){
    return {
      userAvatar: 'http://thirdqq.qlogo.cn/g?b=oidb&k=icTYjyV5afABvE1v4ge9SLg&s=100&t=1584195695',
      userName: '',
      change_toggle: 'el-icon-s-fold',
      isOpen: false,
      menuList: [],   // 菜单数据:json数据
      activePath: '',  // 激活当前选中的菜单url

    }
  },
  /*
  * 使用 vue 中的周期函数: mounted :当我们的document元素挂在在页面并且使用浏览器去渲染时  调用此函数
  * created 页面被创建的时候调用此函数
  * */
  mounted() {
    // 去Localstorage 里面获取用户信息
    let user = LocalStorage.get("setUserInfo")
    this.userAvatar = user.data.avatar
    this.userName= user.data.nickname
    //当我们点击流浪器 历史后退或者前进图标是,需要判断是否,没有用户信息那么就去登录
    if(!user.data.nickname || user.data === undefined){
       this.$router.push('/login')
    }
  },
  created() {
    // 发起http   Get请求去后台获取菜单数据
    this.getMenuList()
  },
  methods:{
    async logout(){
     const con =await  this.$confirm("此操作将退出系统,是否继续?",{
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: 'warning'
       }).catch(() =>{
         this.$message({
           type: "error",
           message: "已取消此操作"
         })
       })
      // 如果点击的确定按钮,那么就需要清除本地存储控件里面的token和用户信息
      if(con === "confirm"){
        // 1.清除本地存储控件里面的token和用户信息
        LocalStorage.clearAll()
        // 2.跳转登录页面
        await  this.$router.push('/login')
      }
    },
    getMenuList(){
      // 发起http Get请求从后台获取数据返回给前端页面
      this.$http.get('system/user/findMenu').then(res => {
          console.log("获取的菜单数据为======:",res.data.data)
        if(res.data.success){//  后台成功响应回数据
          this.menuList = res.data.data   // 赋值给menuList
        }else{
          this.$message.error("获取菜单数据失败",res.data.msg)
        }
      })
    },
    changeToggle() {
      //点击将isOpen值变化  取反
      this.isOpen = !this.isOpen
      if(this.isOpen){
        this.change_toggle = 'el-icon-s-unfold'
      }else{
        this.change_toggle = 'el-icon-s-fold'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.main_container{
  height: 100vh;
  width: 100%;
}
.el-header {
  z-index: 100;
  box-shadow: 0 0 5px #cccccc; // 投影,阴影
  display: flex;
  justify-content: space-between; // 内容靠两边
  align-items: center;
  color: #FFFFFF;
  padding: 3px 5px 3px 10px;
  img{
    width: 170px;
    height: 60px;
  }
  .user_name{
    top:-15px;
    position: relative;
    margin-left: 5px;
    text-align: center;
    color: black;
    font-size: 15px;
  }
}
.el-aside{
  background-color: #222653;
  .toggleBtn{
    border: none;
    padding-right: 5px;
    font-size: 20px;
    line-height: 30px;
    color: #FFFFFF;
    text-align: right;
    cursor: pointer;
    border-bottom: solid 1px #FFFFFF;
  }
  .el-menu{
    height: 100vh;
    border:none;
  }
}
</style>
